$default-icon-colors: $oc-grape-7, $oc-violet-7, $oc-cyan-9, $oc-indigo-7, $oc-pink-8;

// Add this class to the lowest common ancestor of <ActionItemsBar> and <ActionItemsToggle>
.action-items {
    --action-item-width: 2.5rem;
    --action-item-container-width: 2.5625rem; // 2.5rem + 1px

    &__bar {
        flex: 0 0 auto;
        // We won't need hacky container width in the redesign.
        // Remove this var and use --action-item-width everywhere.
        width: var(--action-item-container-width);
        background-color: var(--color-bg-2);
        list-style: none;

        .theme-redesign & {
            width: var(--action-item-width);
            background-color: var(--body-bg);

            // Only rendered for redesign
            &--collapsed {
                width: 0.5rem;
            }
        }
    }

    &__toggle-container {
        width: var(--action-item-width);
        background-color: var(--color-bg-2);
        padding-top: 0.375rem;
        padding-bottom: 0.25rem;

        .theme-redesign & {
            background-color: var(--body-bg);
            padding-top: 0;
            padding-bottom: 0;
        }

        &--open {
            border-bottom: solid var(--color-bg-2) 1px;
            margin-bottom: -0.0625rem;

            .theme-redesign & {
                // Don't need to cover RepoHeader border since it doesn't exist in the redesign.
                // Simplify &__.toggle-container (by removing negative margin-botton) when we remove old styles.
                border-bottom: none;
                margin-bottom: 0;
            }
        }
    }

    // Used to visually separate action items bar sections.
    &__divider-horizontal {
        height: 0.0625rem;
        width: 1.25rem;
        background-color: var(--border-color);
        left: 0.625rem;

        &:first-of-type {
            // Special case (pre-redesign): action items toggle belongs to the repo header, which
            // had 1px border-bottom. We used to have to cover it with this divider.
            top: 0;
            transform: translateY(-0.0625rem);

            .theme-redesign & {
                top: auto;
                transform: none;
            }
        }
    }

    // Used to visually separate action items bar toggle from repo header actions.
    &__divider-vertical {
        position: absolute;
        height: 1.25rem;
        width: 0.0625rem;
        top: 0.75rem;
        transform: translateX(-0.0625rem);

        border-radius: 2px;
        background-color: var(--border-color);

        .theme-redesign & {
            position: static;
            transform: none;
            align-self: center;
        }
    }

    &__list {
        overflow-y: auto;

        scrollbar-width: none;
        &::-webkit-scrollbar {
            display: none;
        }
    }

    &__list-item {
        user-select: none;
        &:first-of-type {
            margin-top: 0.375rem;
        }
        &:last-of-type {
            margin-bottom: 0.375rem;
        }
    }

    &__action {
        width: var(--action-item-width);
        height: 2rem;

        .theme-redesign & {
            width: 2rem;
            margin-left: 0.25rem;
            border-radius: 0.1875rem;
        }

        &:hover {
            background-color: var(--color-bg-2);
        }

        &--toggle {
            .theme-redesign & {
                height: auto;
                padding: 0.25rem;
            }
        }

        &--pressed {
            color: var(--body-color);
            background-color: var(--color-bg-3);

            // Override existing hover styles
            &:hover {
                background-color: var(--color-bg-3);
            }
        }

        &--inactive {
            cursor: default;
            filter: saturate(0%);
            opacity: 0.7;
        }

        // Default icon generated for extensions with no iconURL
        &--no-icon {
            &::after {
                color: $white;
                // Center letter
                display: flex;
                align-items: center;
                justify-content: center;
                height: 1rem;
                width: 1rem;
                font-size: (10 / 16) + rem;
                content: attr(data-content);
                border-radius: (2 / 16) + rem;
            }

            &-inactive {
                &::after {
                    background-color: var(--color-bg-3) !important;
                    color: var(--text-muted) !important;
                }
            }
        }
    }

    &__icon {
        height: 1rem !important;
        width: 1rem !important;

        // Default icon background color
        @for $i from 1 through length($default-icon-colors) {
            &-#{$i} {
                &::after {
                    background-color: nth($default-icon-colors, $i);
                }
            }
        }
    }

    // e.g. "close extensions panel", "add extensions"
    &__aux-icon {
        .theme-redesign & {
            color: var(--icon-color);
        }
    }

    &__scroll {
        width: var(--action-item-width);

        &:hover {
            background-color: var(--color-bg-2);
        }
    }
}
